<template>
  <div>
    <el-form ref="form" v-loading="loading" :model="entity" :rules="rules" label-width="80px">
      <el-form-item label="ID" prop="id" hidden>
        <el-input v-model="entity.id" disabled></el-input>
      </el-form-item>
      <h4>基础信息</h4>
      <el-form-item label="用户名">
        <el-input :value="entity.loginName" disabled></el-input>
      </el-form-item>
      <h4>认证信息</h4>
      <el-form-item label="姓名" prop="nickName">
        <el-input v-model="entity.nickName"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phoneNumber">
        <el-input type="number" v-model="entity.phoneNumber"></el-input>
      </el-form-item>
      <el-form-item label="身份证正面" prop="idCardFront">
        <uploader :value.sync="entity.idCardFront"></uploader>
      </el-form-item>
      <el-form-item label="身份证背面" prop="idCardBack">
        <uploader :value.sync="entity.idCardBack"></uploader>
      </el-form-item>
      <el-form-item label="公司名称 " prop="companyName">
        <el-input v-model="entity.companyName"></el-input>
      </el-form-item>
      <el-form-item label="营业执照" prop="cardFront">
        <uploader :value.sync="entity.businessLicense"></uploader>
      </el-form-item>
      <el-form-item label="所在区域" prop="areaId">
        <area-selector v-model="entity.areaId"></area-selector>
      </el-form-item>
      <el-form-item label="详细地址" prop="areaDetail">
        <el-input v-model="entity.areaDetail"></el-input>
      </el-form-item>
      <el-form-item label="种植面积" prop="plantAcreage">
        <el-input-number v-model="entity.plantAcreage"></el-input-number>
      </el-form-item>
      <el-form-item label="年产量" prop="annualYield">
        <el-input-number v-model="entity.annualYield"></el-input-number>
      </el-form-item>
      <el-form-item label="预算" prop="budget">
        <el-input-number v-model="entity.budget"></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="handleAudit()">通过</el-button>
        <el-button type="danger" @click="handleReject()">拒绝</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import AuditUserAPI from '@/api/audit/audit_user';
import { EditMethods } from '@/utils/crud';
import Uploader from '../../components/Uploader';

export default {
    components: {
        Uploader
    },
    props: {
        id: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            loading: 0,
            entity: {
                auditType: 0,
                registerType: 0,
                nickName: '',
                phoneNumber: '',
                idCardFront: '',
                idCardBack: '',
                companyName: '',
                businessLicense: ''
            },
            rules: {
                nickName: [{ required: true, trigger: 'blur', message: '必填' }],
                phoneNumber: [{ required: true, trigger: 'blur', message: '必填' }],
                registerType: [{ required: true, trigger: 'blur', message: '必填' }],
                idCardFront: [{ required: true, trigger: 'blur', message: '必填' }],
                idCardBack: [{ required: true, trigger: 'blur', message: '必填' }],
            }
        };
    },
    computed: {
        ...mapGetters([
            'dictionary'
        ]),
        auditType() {
            return this.$store.state.auditType;
        }
    },
    created: function () {
        this.init();
    },
    methods: Object.assign(EditMethods(AuditUserAPI), {
        handleAudit() {
            this.loading++;
            AuditUserAPI.audit({ id: this.entity.id, auditType: this.auditType.pass })
                .then(() => {
                    this.loading--;
                    this.$emit('saved');
                }).catch(() => {
                    this.loading--;
                });
        },
        handleReject() {
            this.$prompt('请输入理由', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(({ value }) => {
                this.loading++;
                AuditUserAPI.audit({ id: this.entity.id, auditType: this.auditType.reject, auditOption: value })
                    .then(() => {
                        this.$emit('saved');
                        this.loading--;
                    }).catch(() => {
                        this.loading--;
                    });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        }
    })
};
</script>

<style>

</style>
